<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="订单号">
          <el-input
            v-model="formInline.order_id"
            placeholder="请输入订单号"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="员工姓名">
          <el-input
            v-model="formInline.name"
            placeholder="请输入员工姓名"
          ></el-input>
        </el-form-item> -->
        <!-- <el-form-item label="员工手机号">
          <el-input
            v-model="formInline.mobile"
            placeholder="请输入员工手机号"
          ></el-input>
        </el-form-item> -->
        <!-- <el-form-item label="时间">
          <el-date-picker v-model="formInline.value" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="stateBox">
      <el-badge class="items">
        <el-button
          :type="status == '' ? 'primary' : ''"
          size="normal"
          @click="handleStatus('')"
          >全部</el-button
        >
      </el-badge>
      <el-badge :value="value1" class="items" :hidden="hidden1">
        <el-button
          :type="status == '1' ? 'primary' : ''"
          size="normal"
          @click="handleStatus(1)"
          >待付款</el-button
        >
      </el-badge>
      <el-badge :value="value2" class="items" :hidden="hidden2">
        <el-button
          :type="status == '2' ? 'primary' : ''"
          size="normal"
          @click="handleStatus(2)"
          >待接单</el-button
        >
      </el-badge>
      <el-badge class="items" :value="value3" :hidden="hidden3">
        <el-button
          :type="status == '3' ? 'primary' : ''"
          size="normal"
          @click="handleStatus(3)"
          >已接单</el-button
        >
      </el-badge>
      <el-badge :value="value4" class="items" :hidden="hidden4">
        <el-button
          :type="status == '4' ? 'primary' : ''"
          size="normal"
          @click="handleStatus(4)"
          >维修中</el-button
        >
      </el-badge>
      <el-badge :value="value5" class="items" :hidden="hidden5">
        <el-button
          :type="status == '5' ? 'primary' : ''"
          size="normal"
          @click="handleStatus(5)"
          >待验收</el-button
        >
      </el-badge>
      <el-badge class="items" :value="value6" :hidden="hidden6">
        <el-button
          :type="status == '6' ? 'primary' : ''"
          size="normal"
          @click="handleStatus(6)"
          >已验收</el-button
        >
      </el-badge>
      <el-badge :value="value7" class="items" :hidden="hidden7">
        <el-button
          :type="status == '7' ? 'primary' : ''"
          size="normal"
          @click="handleStatus(7)"
          >验收未通过</el-button
        >
      </el-badge>
    </div>
    <div class="text item">
      <el-table
        v-loading="loading"
        :data="tableData"
        max-height="600"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="index"
          align="center"
          type="index"
          :index="indexMethod"
          label="序号"
          width="70"
        >
        </el-table-column>
        <el-table-column prop="order_id" align="center" label="订单号">
        </el-table-column>
        <el-table-column prop="mobile" align="center" label="用户名">
          <template slot-scope="scope">
            {{ scope.row.user != null ? scope.row.user.nickname : "" }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="mobile" align="center" label="用户手机号">
          <template slot-scope="scope">
            {{ scope.row.user.mobile }}
          </template>
        </el-table-column> -->
        <el-table-column prop="mobile" align="center" label="用户编号">
          <template slot-scope="scope">
            {{ scope.row.user_id }}
          </template>
        </el-table-column>
        <el-table-column prop="mobile" align="center" label="勘察项目">
          <template slot-scope="scope">
            {{ scope.row.maint[0].title }}
          </template>
        </el-table-column>
        <el-table-column prop="mobile" align="center" label="地址">
          <template slot-scope="scope">
            <!-- {{ scope.row.ship_address_ds + scope.row.ship_address }} -->
            <div class="modalityUser">
              <el-tooltip
                class="item"
                effect="dark"
                :content="scope.row.ship_address_ds + scope.row.ship_address"
                placement="top-start"
              >
                <span class="text">{{
                  scope.row.ship_address_ds + scope.row.ship_address
                }}</span>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="yvyue_time"
          align="center"
          label="勘察员上门时间"
        >
        </el-table-column>
        <el-table-column
          prop="service_time"
          align="center"
          label="维修工上门时间"
        >
          <template slot-scope="scope">
            {{
              scope.row.is_up_dizhi_status === 1
                ? scope.row.service_time
                : scope.row.user_weixin_order_times
            }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="mobile" align="center" label="角色">
        </el-table-column> -->
        <!-- <el-table-column prop="img" align="center" label="员工头像">
          <template slot-scope="scope">
            <el-image
              style="width: 50px; height: 50px"
              :src="scope.row.img"
              fit="cover"
            ></el-image>
          </template>
        </el-table-column> -->
        <el-table-column prop="status_text1" align="center" label="状态">
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleEdit(scope.row)"
              >查看</el-button
            >
            <!-- <el-button type="danger" size="mini" @click="handleDel(scope.row)"
              >取消订单</el-button
            > -->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 100, 200, 300]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="反馈内容"
      :visible.sync="dialogVisible"
      width="35%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="parameter" label-width="80px">
        <el-form-item>
          <el-input
            type="textarea"
            :rows="2"
            v-model="parameter.common"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">返 回</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import { opinions } from "../../../../utils/api";
import { getDingDan, getDingDanCount } from "../../../../utils/main";
export default {
  data() {
    return {
      hidden1: false,
      hidden2: false,
      hidden3: false,
      hidden4: false,
      hidden5: false,
      hidden6: false,
      hidden7: false,
      loading: false,
      token: sessionStorage.getItem("token"),
      dialogVisible: false,
      formInline: {
        order_id: "",
      },
      tableData: [],
      parameter: {
        common: "",
      },
      total: 0,
      limit: 10,
      page: 1,
      name: "",
      currentPage: "1",
      mobile: "",
      value: "",
      value1: "",
      value2: "",
      value3: "",
      value4: "",
      value5: "",
      value6: "",
      value7: "",
      id: "",
      order_id: "",
      status: "",
    };
  },
  methods: {
    //查询
    onSubmit() {
      this.order_id = this.formInline.order_id;
      this.page = 1;
      this.getList();
    },
    // 重置
    onReset() {
      this.order_id = "";
      this.formInline.order_id = "";
      this.getList();
    },
    //详情
    handleEdit(row) {
      // this.id = row.authority_user_id[0].id;
      // console.log(this.id);
      // this.dialogVisible = true;
      this.$router.push(`/dingdan/ddxq?order_id=${row.order_id}`);
    },
    // 取消订单
    handleDel() {},
    //序号
    indexMethod(index) {
      if (this.token < this.limit) {
        return this.total - index;
      } else {
        return this.total - (this.page - 1) * this.limit - index;
      }
    },
    //关闭
    handleClose(done) {
      done();
    },
    //条数
    handleSizeChange(val) {
      this.limit = val;
      this.getList();
    },
    //页数
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },
    handleStatus(i) {
      this.status = i;
      this.getList();
    },
    async getList() {
      this.loading = true;
      let res = await getDingDan(
        this.token,
        this.page,
        this.limit,
        this.order_id,
        this.status
      );
      if (res.data.status) {
        this.tableData = res.data.data.data || [];
        this.total = res.data.data.count;
        this.tableData.forEach((item) => {
          item.yvyue_time = this.getTime(item.yvyue_times * 1000);
          if (item.status == 1) {
            // if (item.order_id == "031113210632887") {
            //   console.log(item);
            // }
            if (item.pay_status == 1) {
              item.status_text1 = "未支付";
            }
            if (item.pay_status == 6 && item.maint[0].status == 0) {
              item.status_text1 = "勘察员未接单";
            }
            if (item.pay_status == 6 && item.maint[0].status == 1) {
              item.status_text1 = "勘察员已接单";
            }

            if (
              item.pay_status == 6 &&
              item.maint[0].maintenance_status == 1 &&
              (item.maint[0].status == 1 || item.maint[0].status == 2)
            ) {
              if (item.authority_user_status == 1) {
                // 未上门
                item.status_text1 = "勘察员已接单";
              } else {
                // 已上门
                item.status_text1 = "勘察中";
              }
              if (item.maint[0].status == 2) {
                item.status_text1 = "材料待付款";
              }
            }
            if (
              item.pay_status == 2 &&
              item.maint[0].maintenance_status == 1 &&
              (item.maint[0].status == 1 || item.maint[0].status == 2)
            ) {
              item.status_text1 = "已付款";
            }

            if (item.pay_status == 2 && item.maint[0].maintenance_status == 2) {
              item.status_text1 = "等待维修";
              if (item.maintenance_user_status == 1) {
                item.status_text1 = "等待维修";
              }
              if (item.maintenance_user_status == 2) {
                item.status_text1 = "维修中";
              }
            }
            if (item.maint[0].maintenance_status == 3 && item.confirm == 1) {
              item.status_text1 = "待验收";
            }
            if (item.confirm == 2 && item.is_comment == 1) {
              item.status_text1 = "待评价";
            }
            if (item.confirm == 3) {
              item.status_text1 = "验收不通过";
            }
          }
          if (item.status == 2) {
            item.status_text1 = "已完成";
          }
          if (item.status == 3) {
            item.status_text1 = "已取消";
          }
        });
        // yvyue_times
        // console.log(this.tableData, "55555");
        let timer = setTimeout(() => {
          this.loading = false;
          clearTimeout(timer);
        }, 400);
      } else {
        if (res.data.msg == "token失效,请重新进行登录") {
          this.$router.push("/login");
        }
        if (res.data.msg == "此账号没有权限") {
          this.$message.error(res.data.msg);
          this.loading = false;
        }
        let timer = setTimeout(() => {
          this.$message.error(res.data.msg);
        }, 5000);
      }
      getDingDanCount(this.token).then((res) => {
        if (res.data.status) {
          this.value1 = res.data.data[1];
          this.value2 = res.data.data[2];
          this.value3 = res.data.data[3];
          this.value4 = res.data.data[4];
          this.value5 = res.data.data[5];
          this.value6 = res.data.data[6];
          this.value7 = res.data.data[7];
          if (this.value1 == 0) {
            this.hidden1 = true;
          }
          if (this.value2 == 0) {
            this.hidden2 = true;
          }
          if (this.value3 == 0) {
            this.hidden3 = true;
          }
          if (this.value4 == 0) {
            this.hidden4 = true;
          }
          if (this.value5 == 0) {
            this.hidden5 = true;
          }
          if (this.value6 == 0) {
            this.hidden6 = true;
          }
          if (this.value7 == 0) {
            this.hidden7 = true;
          }
        }
      });
      //  getDingDanCount(this.token);
      // if (res.data.status) {
      //   this.value1 = res.data.data[1];
      //   this.value2 = res.data.data[2];
      //   this.value4 = res.data.data[4];
      //   this.value5 = res.data.data[5];
      //   this.value7 = res.data.data[7];
      //   if (this.value1 == 0) {
      //     this.hidden1 = true;
      //   }
      //   if (this.value2 == 0) {
      //     this.hidden2 = true;
      //   }
      //   if (this.value4 == 0) {
      //     this.hidden4 = true;
      //   }
      //   if (this.value5 == 0) {
      //     this.hidden5 = true;
      //   }
      //   if (this.value7 == 0) {
      //     this.hidden7 = true;
      //   }
      //   // this.tableData = res.data.data.data || [];
      //   // this.total = res.data.data.count;
      //   // console.log(this.total);
      //   // console.log(this.tableData, "55555");
      // }
    },
    getTime(e) {
      let date = new Date(e);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hour = date.getHours();
      let minute = date.getMinutes();
      month = month < 10 ? "0" + month : month;
      day = day < 10 ? "0" + day : day;
      hour = hour < 10 ? "0" + hour : hour;
      minute = minute < 10 ? "0" + minute : minute;
      return year + "-" + month + "-" + day + " " + hour + ":" + minute;
    },
    // async getCount() {
    //   let res = await getDingDanCount(this.token);
    //   if (res.data.status) {
    //     this.value1 = res.data.data[1];
    //     this.value2 = res.data.data[2];
    //     this.value4 = res.data.data[4];
    //     this.value5 = res.data.data[5];
    //     this.value7 = res.data.data[7];
    //     if (this.value1 == 0) {
    //       this.hidden1 = true;
    //     }
    //     if (this.value2 == 0) {
    //       this.hidden2 = true;
    //     }
    //     if (this.value4 == 0) {
    //       this.hidden4 = true;
    //     }
    //     if (this.value5 == 0) {
    //       this.hidden5 = true;
    //     }
    //     if (this.value7 == 0) {
    //       this.hidden7 = true;
    //     }
    //   } else {
    //     if (res.data.msg == "token失效,请重新进行登录") {
    //       this.$router.push("/login");
    //     }
    //     if (res.data.msg == "此账号没有权限") {
    //       this.$message.error(res.data.msg);
    //       this.loading = false;
    //     }
    //     let timer = setTimeout(() => {
    //       this.$message.error(res.data.msg);
    //     }, 5000);
    //   }
    // },
    // getNowTime(e) {
    //   let date = new Date(e);
    //   let year = date.getFullYear();
    //   let month = date.getMonth() + 1;
    //   let day = date.getDate();
    //   let hour = date.getHours();
    //   let minute = date.getMinutes();
    //   month = month < 10 ? "0" + month : month;
    //   day = day < 10 ? "0" + day : day;
    //   hour = hour < 10 ? "0" + hour : hour;
    //   minute = minute < 10 ? "0" + minute : minute;
    //   return year + "-" + month + "-" + day + " " + hour + ":" + minute;
    // },
  },
  mounted() {
    // this.opinionsS();
    this.getList();
    // this.getCount();
  },
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}

.divFlex {
  display: flex;
  align-items: center;
}
.stateBox {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-content: center;
  /* border-bottom: 1px solid #d9d7d7; */
  margin-bottom: 20px;
}
.items {
  /* width: 80px;
  font-size: 18px; */
}
.modalityUser {
  display: flex;
  flex-direction: column;
  margin: 0 15px;
  width: 70%;
  /* height: 70px; */
  /* justify-content: space-between;
  border: 1px solid pink; */
}

.modalityUser .item {
  display: block;
  text-align: left;
  width: 90%;
  /* height: 30%; */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: 0;
  /* border: 1px solid black; */
}
</style>